<template>
  <div>
    <div class="container">
      <!-- 搜索 -->
      <!-- <van-search placeholder="请输入搜索关键词" v-model="value" @focus="onFocus" /> -->
      <van-search v-model="value" placeholder="请输入搜索关键词" show-action shape="round" @focus="onFocus">
        <van-icon slot="action" :name="require('../assets/icon/xq_bj-icon.png')" size="22" />
      </van-search>
      <!-- 九宫图 -->
      <van-grid :column-num="4" class="box-grid-home-top" :border="false">
        <van-grid-item :icon="require('../assets/icon/jgq_ms_icon.png')" text="美食" />
        <van-grid-item :icon="require('../assets/icon/jgq_dy_icon.png')" text="电影" />
        <van-grid-item :icon="require('../assets/icon/jgq_yl_icon.png')" text="娱乐" />
        <van-grid-item :icon="require('../assets/icon/jgq_mf_icon.png')" text="美发" />
        <!-- 第二行 -->
        <van-grid-item :icon="require('../assets/icon/jgq_yiliao_icon.png')" text="医疗" />
        <van-grid-item :icon="require('../assets/icon/jgq_wm_icon.png')" text="外卖" />
        <van-grid-item :icon="require('../assets/icon/jgq_jd_icon.png')" text="酒店" />
        <van-grid-item :icon="require('../assets/icon/jgq_js_icon.png')" text="健身" />
      </van-grid>
      <!-- 推荐模块 -->
      <van-row type="flex" justify="space-around" class="row-recommend">
        <van-col span="4">
          <van-icon :name="require('../assets/icon/fuli_icon.png')" size="50"></van-icon>
        </van-col>
        <van-col span="4">
          <van-icon :name="require('../assets/icon/meishi_icon.png')" size="50"></van-icon>
        </van-col>
        <van-col span="4">
          <van-icon :name="require('../assets/icon/huoguo_icon.png')" size="50"></van-icon>
        </van-col>
        <van-col span="4">
          <van-icon :name="require('../assets/icon/bwc_icon.png')" size="50"></van-icon>
        </van-col>
        <van-col span="4">
          <van-icon :name="require('../assets/icon/vip_icon.png')" size="50"></van-icon>
        </van-col>
      </van-row>
      <!-- 图片模块 -->
      <div class="box">
        <img :src="require('../assets/icon/yhj_banner.png')" />
      </div>
      <!-- tab栏切换 -->
      <van-tabs
        v-model="active"
        :swipe-threshold="5"
        @click="changeTab"
        color="#fcd848"
        title-active-color="#fcd848"
      >
        <van-tab :title="item.title" v-for="(item, index) in titleList" :key="index">
          <van-col
            span="11"
            v-if="index == active"
            v-for="(it, i) in imageList"
            :key="i"
            van-tab--active
            @click="goDetail"
          >
            <span>{{it.text}}</span>
          </van-col>
        </van-tab>
      </van-tabs>
      <!-- 下边栏 -->
      <van-tabbar v-model="tabActive" active-color="#fcd848">
        <van-tabbar-item>
          <span>首页</span>
          <img slot="icon" :src="tabActive ===0? icon.active : icon.inactive" />
        </van-tabbar-item>

        <van-tabbar-item>
          <span>攻略</span>
          <img slot="icon" :src="tabActive ===1? icon1.active : icon1.inactive" />
        </van-tabbar-item>

        <van-tabbar-item>
          <img slot="icon" :src="tabActive ===2? icon2.active : icon2.inactive" class="middle" />
        </van-tabbar-item>

        <van-tabbar-item>
          <span>关注</span>
          <img slot="icon" :src="tabActive===3 ? icon3.active : icon3.inactive" />
        </van-tabbar-item>

        <van-tabbar-item>
          <span>我的</span>
          <img slot="icon" :src="tabActive===4 ? icon4.active : icon4.inactive" />
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      active: 0,
      // tab栏目模块图片
      imageList: [],
      // titleList数据（死数据）
      titleList: [
        { title: "推荐" },
        { title: "附近" },
        { title: "达人" },
        { title: "菜谱" },
        { title: "视频" }
      ],
      timer: null,
      tabActive: 0,
      icon: {
        active: require("../assets/icon/home_icon.png"),
        inactive: require("../assets/icon/home1_icon.png")
      },
      icon1: {
        active: require("../assets/icon/gn1_icon.png"),
        inactive: require("../assets/icon/gn_icon.png")
      },
      icon2: {
        active: require("../assets/icon/tj_icon.png"),
        inactive: require("../assets/icon/tj_icon.png")
      },
      icon3: {
        active: require("../assets/icon/gz1_icon.png"),
        inactive: require("../assets/icon/gz_icon.png")
      },
      icon4: {
        active: require("../assets/icon/wode1_icon.png"),
        inactive: require("../assets/icon/wode_icon.png")
      }
    };
  },
  created() {
    this.getImagesDef();
  },
  methods: {
    onFocus() {
      this.$router.push("/search");
    },
    changeTab() {
      console.log(this.active);
      if (!this.timer) {
        this.imageList = [];
        this.timer = setTimeout(() => {
          if (this.active === 0) {
            this.getImagesDef();
          } else {
            this.getImages();
          }
          this.timer = null;
        }, 200);
      }
    },
    async getImagesDef() {
      const { data: res } = await this.$http.get("/api/search");
      console.log(res);
      this.imageList = res.data.rows;
    },
    async getImages() {
      const { data: res } = await this.$http.get("/api/search", {
        params: {
          sortField: "location",
          sortRule: "ASC",
          addressGPS: this.$store.state.position
        }
      });
      console.log(res);
      this.imageList = res.data.rows;
    },
    goDetail() {
      this.$router.push({
        path: "/store/detail",
        query: {
          storeId: 0
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  padding: 9px;
  .van-row--flex {
    margin-top: 10px;
    .van-col--4 {
      // border: 1px solid #000;
      border-radius: 5px;
      padding: 6px 3px;
      height: 70px;
      // box-shadow: -1px 2px 15px -8px #000;
      h4 {
        margin: 0;
        padding-bottom: 0px;
        font-size: 15px;
      }
      p {
        margin: 0;
        font-size: 12px;
        color: #959499;
      }
    }
  }
  // 图片样式
  .box {
    margin: 10px 0 -5px;
    width: 100%;
    height: 100px;
    // border: 1px solid #000;
    border-radius: 5px;
    img {
      display: block;
      width: 100%;
    }
  }
  .van-tab.van-ellipsis {
    flex-basis: 18% !important;
  }
  .van-col.van-col--11 {
    margin: 5px 8px;
  }
}
.van-tabbar-item__icon img.middle {
  width: 50px;
  height: 50px;
}
</style>
